<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
    <div th:replace="common-2::menu"></div>
    <link rel="stylesheet" th:href="@{/css/typo.css}">
    <link rel="stylesheet" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" th:href="@{/lib/tocbot/tocbot.css}">

</head>
<body class="m-body">
    <!--头部导航-->
    <div th:replace="common-2::headermenu(5)"></div>

    <!--中间内容-->
    <div id="waypoint" class="m-container m-padded-tb-big animate__animated animate__jackInTheBox">
        <div class="ui container">
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img th:src="${blog.user.avatar}" width="100px" height="100px" class="ui avatar image">
                        <div class="content">
                            <div style="color: #868e96" class="header">[[${blog.user.nickname}]]</div>
                        </div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i> [[${#dates.format(blog.createTime,'yyyy-MM-dd')}]]
                    </div>
                    <div class="item">
                        <i class="eye icon"></i>[[${blog.views}]]
                    </div>
                </div>
            </div>

            <div class="ui js-toc-content bottom attached padded segment">

                <div class="ui right aligned basic segment">
                    <a th:href="@{/type(id=${blog.type.id})}" class="ui orange basic label" th:text="${blog.type.name}"></a>
                </div>
                <div class="ui container">
                    <!--首图区域，可省略-->
                    <img th:src="${blog.firstPicture}" class="ui fluid rounded image">
                </div>
                <!--标题-->
                <h2 id="bt" class="ui center aligned header" th:text="${blog.title}"></h2>
                <br/>
                <!--文章内容-->
                <div id="content" class="typo typo-selection m-padded-rl-big-responsive m-margin-b-large" th:utext="${blog.content}">
                    <pre><code class="language-css">123</code> </pre>
                    <pre><code class="language-css">p{ color: red }</code> </pre>
                    <p>hhhhhdhawhdh</p>
                    <h2 id="bt1">1</h2>
                    <p>dadwadwadwadaw</p>
                    <h2 id="bt2">2</h2>
                    <p>红红火火恍恍惚惚</p>
                    <h3 id="bt3">123</h3>
                </div>
                <h4 class="ui horizontal divider header">END</h4>
                <br>
                <!--赞赏-->
                <div class="ui center aligned basic segment" th:if="${blog.appreciation}">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQ flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img th:src="@{/img/wei-xin.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img th:src="@{/img/wei-xin.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui container m-margin-t-b-max" th:if="${blog.commentabled}">
            <div class="ui bottom attached segment">
                <!--留言区域列表-->
                <div id="comment-container" class="ui teal segment">
                    <div th:fragment="commentList">
                        <div class="ui comments" style="max-width: 100%">
                            <h3 class="ui dividing header">评论</h3>
                            <div th:if="${comments.size()==0}">
                                <div class="m-padded-tb-big" style="text-align: center">
                                    <span>暂无评论，快来发表评论吧</span>
                                </div>
                            </div>
                            <div class="comment" th:each="comment:${comments}">
                                <a class="avatar">
                                    <img th:src="${comment.avatar}" >
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${comment.nickname}">Matt</span>
                                        <div class="ui mini basic orange left pointing label m-padded-mini" th:if="${comment.admin}">博主</div>
                                    </a>
                                    <div class="metadata">
                                        <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm:ss')}">Today at 5:42PM</span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">
                                        How artistic!
                                    </div>
                                    <div class="actions">
                                        <a class="Reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                    <div class="comment" th:each="reply:${comment.replyComments}">
                                        <a class="avatar">
                                            <img th:src="${reply.avatar}" >
                                        </a>
                                        <div class="content">
                                            <a class="author">
                                                <span th:text="${reply.nickname}">小红</span>
                                                <div class="ui mini basic orange left pointing label m-padded-mini" th:if="${reply.admin}">博主</div>
                                                &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
                                            </a>
                                            <div class="metadata">
                                                <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm:ss')}">Today at 5:42PM</span>
                                            </div>
                                            <div class="text" th:text="${reply.content}">
                                                How artistic!
                                            </div>
                                            <div class="actions">
                                                <a class="Reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div id="comment-form" class="ui form">
                    <input type="hidden" name="blogId" th:value="${blog.id}">
                    <input type="hidden" name="parentId" value="-1">
                    <div class="field">
                        <textarea name="content" placeholder="说点什么吧..."></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-t-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-t-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="email" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-t-small">
                            <button id="comment-submit" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i> 发布</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>

    <!--右下角小图标-->
    <div id="toolbar" class="ui vertical icon buttons m-fixed m-right-bottom" style="display: none">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui wechat icon green button"><i class="weixin icon"></i> </button>
        <button id="toTop" class="ui icon teal button"><i class="arrow up icon"></i> </button>
    </div>

    <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
        <ol class="js-toc">

        </ol>
    </div>

    <div id="qrcode" class="ui weichat-qr flowing popup transition hidden " style="width: 130px !important;"></div>

    <!--底部footer-->
    <div th:replace="common-2::footermenu"></div>
    <!--script-->
    <div th:replace="common-2::scriptmenu"></div>
    <script th:src="@{/lib/prism/prism.js}"></script>
    <script th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script th:src="@{/lib/waypoints/jquery.waypoints.js}"></script>
    <!--平滑滚动-->
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>


    <script type="text/javascript" th:inline="javascript">
        $(function () {
            $("#btn").click(function () {
                $(".m-item").toggleClass('m-mobile-hide');
            })

            $("#payButton").popup({
                popup : $(".payQ.popup"),
                on : 'click',
                position : 'bottom center'
            })

            tocbot.init({
                // Where to render the table of contents.
                tocSelector: '.js-toc',
                // Where to grab the headings to build the table of contents.
                contentSelector: '.js-toc-content',
                // Which headings to grab inside of the contentSelector element.
                headingSelector: 'h1, h2, h3',
                // For headings inside relative or absolute positioned containers within content.
                hasInnerContainers: true,
            });
            $(".toc.button").popup({
                popup : $(".toc-container.popup"),
                on : 'click',
                position : 'left center'
            })

            $(".wechat").popup({
                popup : $(".weichat-qr"),
                on : 'hover',
                position : 'left center'
            })

            var serurl="www.chengfei.xyz";
            var url=/*[[@{/blog(id=${blog.id})}]]*/"";
            var qrcode = new QRCode("qrcode", {
                text: serurl+url,
                width: 120,
                height: 120,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });

            $(".ui.form").form({
                fields : {
                    title : {
                        identifier : 'content',
                        rules: [{
                            type : 'empty',
                            prompt : '请输入评论内容'
                        }]
                    },
                    content : {
                        identifier : 'nickname',
                        rules: [{
                            type : 'empty',
                            prompt : '请输入你的昵称'
                        }]
                    },
                    typeId : {
                        identifier : 'email',
                        rules: [{
                            type : 'email',
                            prompt : '请输入正确的邮箱地址'
                        }]
                    }
                }
            });
        })

        $('#toTop').click(function () {
            $(window).scrollTo(0,500);
        })


        var waypoint = new Waypoint({
            element: document.getElementById('waypoint'),
            handler: function(direction) {
                if (direction=='down'){
                    $('#toolbar').show(500);
                }else {
                    $('#toolbar').hide(500);
                }
                console.log('Scrolled to waypoint!'+direction)
            }
        })

        $('#comment-submit').click(function () {
            var boo=$('.ui.form').form('validate form');
            if (boo){
                postData();
            }else {
                console.log('校验失败')
            }
        });

        function postData() {
            $("#comment-container").load(/*[[@{/comment}]]*/"",{
                "parentId" : $("[name='parentId']").val(),
                "blogId" : $("[name='blogId']").val(),
                "nickname" : $("[name='nickname']").val(),
                "email" : $("[name='email']").val(),
                "content" : $("[name='content']").val()
            },function (responseTxt,statusTxt,xhr) {
                // $(window).scrollTo($('#comment-container'),500);
                clearContent();
            })
        }
        
        function clearContent() {
            $("[name='content']").val("");
            $("[name='parentId']").val(-1);
            $("[name='content']").attr("placeholder","说点什么吧...");
        }

        function reply(obj) {
            var commentId=$(obj).data('commentid');
            var commentNickname=$(obj).data('commentnickname');
            $("[name='content']").attr("placeholder","@"+commentNickname).focus();
            $("[name='parentId']").val(commentId);
            $(window).scrollTo($('#comment-form'),500);
        }

    </script>
</body>
</html>